// pages/category/index.js
//引入用来发送请求的方法   一定要把路径补全
import{ request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({

    /**
     * 页面的初始数据
     */
    data: {
        //左侧的菜单数据
        leftMenuList:[],
        //右侧的商品数据
        rightContent:[],
        //被点击的左侧的菜单
        currentIndex:0,
        //右侧内容的滚动条距离顶部的距离
        scrollTop:0
    },
    //接口的返回数据
    Cates:[],

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        /*
        0、web中的本地存储和小程序中的本地存储的区别
            1、 写代码的方式不一样了
                web:localStorage.setItem("key","value")  localStorage.getItem{"key"}
                小程序中存储的方式：wx.setStorageSync("cates", {time:Date.now(),data:this.Cates});
                小程序中获取的方式：wx.getStorageSync('cates');
            2、存的时候有没有做类型转换
                web:不管存入的什么类型的数据，最终都会先调用一下toString()，把数据变成字符串再进行存入
                小程序中：不存在类型转换的操作，存入数据类型与获取的数据类型一样
        1、先判断一下本地存储中有没有旧数据
            {time:Date.Now(),data:[...]}  用时间戳的方式存储一下本地数据（对象存储）
        2、没有旧数据，直接发送新请求
        3、有旧的数据同时旧的数据也没有过期，就使用本地存储中的旧数据
        */
        //this.getCates();//此处是调用获取分类数据的方法，如果不使用本地存储可以用这个方法
        //1、获取本地存储中的数据，（小程序中也是存在本地存储技术）
        const Cates=wx.getStorageSync('cates');
        //2、判断是否存在本地数据
        if(!Cates){
            this.getCates();
        }else{
            //有旧的数据  定义过期时间
            if(Date.now-Cates.time > 1000*10){
                //重新发送请求
                this.getCates();
            }else{
                //可以使用旧的数据
                this.Cates=Cates.data
                //重新渲染左侧的大菜单数据
                let leftMenuList = this.Cates.map(v=>v.cat_name);
                //重新渲染右侧商品数据
                let rightContent = this.Cates[0].children;
                this.setData({
                    leftMenuList,
                    rightContent
                })
            }
        }
    },
    //获取分类数据,接口地址已优化，使用request里面的公共路径
     async getCates(){
        /* request({ */
        /*     url:"/categories", */
        /* }) */
        /* .then(res => { */
        /*     //console.log(res);//下面这一行代码已经能确保拿到了数据，此时可以进行本地存储 */
        /*     this.Cates=res.data.message; */
        /*     //缓存技术存储功能开始 */
        /*     //把接口的数据存入到本地存储中 */
        /*     wx.setStorageSync("cates", {time:Date.now(),data:this.Cates}); */

        /*     //缓存技术存储结束 */
        /*     //构造左侧的大菜单数据 */
        /*     let leftMenuList = this.Cates.map(v=>v.cat_name); */
        /*     //构造右侧商品数据 */
        /*     let rightContent = this.Cates[0].children; */
        /*     this.setData({ */
        /*         leftMenuList, */
        /*         rightContent */
        /*     }) */
        /* }) */


        //、使用es7的async await来发送请求
        const res=await request({url:"/categories"});
        //this.Cates=res.data.message;
        this.Cates=res //此处使用es7语法进行优化，优化完毕需要改request里面的js，如果不优化则不用改
        //缓存技术存储功能开始
        //把接口的数据存入到本地存储中
        wx.setStorageSync("cates", {time:Date.now(),data:this.Cates});
        //缓存技术存储结束
        //构造左侧的大菜单数据
        let leftMenuList = this.Cates.map(v=>v.cat_name);
        //构造右侧商品数据
        let rightContent = this.Cates[0].children;
        this.setData({
            leftMenuList,
            rightContent
        })
    },
    //左侧菜单点击事件，达到左右联动的效果，
    handleItemTap(e){
        /*
        1、获取被点击标题身上的索引，wxml样式判断
        2、给js文件中的data中的currentIndex赋值就可以了
        3、根据不同的索引来渲染右侧的商品内容
        */
       console.log(e);
       const {index}=e.currentTarget.dataset;

       let rightContent = this.Cates[index].children;
       //重新设置右侧内容的scroll-view标签的距离顶部的距离
        this.setData({
            currentIndex:index,
            rightContent,
            //重新设置右侧内容的scroll-view标签的距离顶部的距离
            scrollTop:0
        })
    }
})